<template>
    <app-layout>
        <view class="no-list" v-if="list.length == 0">
            <image src="/static/image/order-empty.png"></image>
            <view>暂无红包记录</view>
        </view>
        <view class="log-list dir-top-nowrap main-center" v-for="(item,index) in list" :key="index">
            <view class="main-between cross-center log-item">
                <view class="dir-left-nowrap cross-center">
                    <view class="name t-omit">{{item.activity_name}}</view>
                </view>
                <view v-if="item.type == 1">已领取</view>
                <view v-else class="dir-right-nowrap cross-center">
                    <image class="arrow" src="/static/image/icon/red-arrow.png"></image>
                    <view style="color: #ff4544">{{item.type == 0 ? '未领取' : '已过期'}}</view>
                </view>
            </view>
            <view class="dir-left-nowrap cross-center log-item reward">
                <image class="status" :src="'./../image/' +item.status + '.png'"></image>
                <view class="name t-omit">{{item.name}}</view>
            </view>
            <view class="log-time">{{item.time}}</view>
            <view  @click="toGet(item)" v-if="item.type != 1" class="click-space"></view>
        </view>
        <view v-if="clearView" @touchmove.stop.prevent catchtouchmove="true" class="get-dialog main-center cross-center">
            <view v-if="clearItem" class="get-item clear">
                <image @click.stop="clearView = false;" class="close-btn" src="./../image/close.png"></image>
                <image class="get-bg" src="./../image/success.png"></image>
                <view class="clear-item dir-top-nowrap main-center" :class="clearItem.status == 'goods' && clearItem.exchange_type == 'offline' ? 'goods':''">
                    <view class="clear-title">添加客服兑换奖品</view>
                    <view v-if="clearItem.status == 'goods'" class="clear-content">获得以下赠品</view>
                    <view v-if="clearItem.status == 'cash'" class="clear-content">获得<text>{{clearItem.real_reward}}</text>元现金红包</view>
                    <view v-if="clearItem.status == 'cash'">请添加客服兑现红包</view>
                    <view v-if="clearItem.status == 'goods'" class="clear-goods-item dir-left-nowrap cross-center">
                        <view class="clear-goods-left main-center cross-center">
                            <image class="goods-img" :src="clearItem.cover_pic"></image>
                        </view>
                        <view class="dir-top-nowrap main-center clear-goods-right">
                            <view class="t-omit-two">{{clearItem.name}}</view>
                        </view>
                    </view>
                </view>
                <view class="clear-qr-item dir-top-nowrap main-center cross-center">
                    <image show-menu-by-longpress class="clear-qr" :src="contact.qrcode"></image>
                    <view v-if="clearItem.status == 'goods'">{{is_not_wechat ? '添加客服兑换奖品' : '长按识别联系人兑现红包'}}</view>
                    <view v-if="clearItem.end_at">兑换期限：{{clearItem.end_at}}</view>
                    <view class="main-between cross-center clear-btn">
                        <view v-if="is_not_wechat" @click="copy">复制微信号</view>
                        <view v-if="is_not_wechat" @click="saveImg">保存图片</view>
                        <view v-if="!is_not_wechat" class="alone" @click="copy">复制微信号</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="time" class="error-dialog main-center cross-center">
            <view class="error-content">
                <view class="error-msg dir-top-nowrap main-center cross-center">
                    <view class="error-time">该奖品已超出兑换期限，无法领取</view>
                    <view>兑换期限:{{time}}</view>
                </view>
                <view @click="time = null" class="error-submit">我知道了</view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState,mapGetters } from "vuex";

    export default {
        data() {
            return {
                is_not_wechat: true,
                clearView: false,
                clearItem: null,
                first: true,
                list: [],
                page: 1,
                time: null,
                contact: null,
                over: true
            }
        },
        onReachBottom() {
            if (!this.over) {
                uni.showLoading({
                    title: '加载中...'
                });
                this.page++;
                this.getIndex();
            }
        },
        methods: {
            copy() {
                this.$utils.uniCopy({
                    data: this.contact.name,
                    success() {
                        uni.showToast({ title: '复制成功'});
                    }
                })
            },
            saveImg() {
                this.$utils.batchSave(this.contact.qrcode).then(res => {
                    uni.showToast({title: '保存成功', icon: 'none'});
                })
            },
            toGet(item) {
                if(item.type == 2) {
                    this.time = item.end_at;
                }else {
                    if(item.exchange_type == 'online') {
                        let mch_list = [{
                            mch_id: 0,
                            goods_list: [{
                                id: item.id,
                                attr: item.attr,
                                num: 1,
                                cat_id: 0,
                                goods_attr_id: item.attr_id
                            }],
                            reward_log_id: item.reward_log_id
                        }];
                        let url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}`;
                        url += `&preview_url=${encodeURIComponent(this.$api.fission.order_preview)}&submit_url=${encodeURIComponent(this.$api.fission.order_submit)}&plugin=fission`;
                        uni.navigateTo({
                            url: url
                        })
                    }else {
                        this.clearView = true;
                        this.clearItem = item;
                    }
                }
            },
            getIndex() {
                let that = this;
                that.over = true;
                that.$request({
                    url: that.$api.fission.log,
                    data: {
                        page: this.page
                    }
                }).then(response=>{
                    this.first = false;
                    that.$hideLoading();
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.contact = response.data.contact;
                        that.list = this.page == 1 ? response.data.list : that.list.concat(response.data.list);
                        if(response.data.list.length == 20) {
                            that.over = false;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                    that.$hideLoading();
                });
            },
        },

        onShow() {
            if(!this.first) {
                uni.showLoading({
                    title: '加载中...'
                });
                this.page = 1;
                this.getIndex();
            }
        },

        onLoad(option) { this.$commonLoad.onload(option);
            // #ifdef H5
            this.is_not_wechat = !this.$jwx.isWechat();
            // #endif
            this.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            this.getIndex();
        }
    }
</script>

<style scoped lang="scss">
    .no-list {
        text-align: center;
        margin-top: #{200rpx};
        font-size: #{24rpx};
        color: #666666;
        image {
            width: #{240rpx};
            height: #{240rpx};
            margin-bottom: #{20rpx};
        }
    }
    .log-list {
        height: #{228rpx};
        border-bottom: #{2rpx} solid #e2e2e2;
        background-color: #fff;
        padding: 0 #{26rpx};
        position: relative;
        .click-space {
            position: absolute;
            right: 0;
            z-index: 10;
            width: #{200rpx};
            top: 0;
            height: 100%;
        }
        .log-item {
            font-size: #{28rpx};
            color: #353535;
            &.reward {
                height: #{90rpx};
            }
            .status {
                width: #{30rpx};
                height: #{30rpx};
                margin-right: #{22rpx};
            }
            .name {
                width: #{385rpx};
            }
            .arrow {
                width: #{12rpx};
                height: #{22rpx};
                margin-left: #{10rpx};
            }
        }
        .log-time {
            color: #666666;
            font-size: #{24rpx};
        }
    }
    .error-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 30;
        .error-content {
            width: #{630rpx};
            height: #{362rpx};
            margin-top: -20%;
            background-color: #fff;
            border-radius: #{16rpx};
            position: relative;
            z-index: 100;
            .error-msg {
                height: #{274rpx};
                width: #{630rpx};
                font-size: #{28rpx};
                color: #666666;
                text-align: center;
                .error-time {
                    font-size: #{32rpx};
                    color: #353535;
                    margin-bottom: #{24rpx};
                }
            }
            .error-submit {
                position: absolute;
                z-index: 100;
                bottom: 0;
                left: 0;
                width: 100%;
                border-top: #{2rpx} solid #e2e2e2;
                line-height: #{88rpx};
                height: #{88rpx};
                color: #ff4544;
                font-size: #{34rpx};
                text-align: center;
            }
        }
    }
    .get-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 30;
        .get-item {
            width: #{528rpx};
            position: relative;
            z-index: 100;
            height: #{690rpx};
            margin-top: -20%;
            &.clear {
                width: #{582rpx};
                height: #{869rpx};
                .close-btn {
                    top: #{38rpx};
                }
                .clear-item {
                    position: absolute;
                    z-index: 100;
                    top: #{210rpx};
                    left: 0;
                    right: 0;
                    width: #{498rpx};
                    margin: 0 auto;
                    text-align: center;
                    font-size: #{24rpx};
                    color: #999999;
                    &.goods {
                        top: #{190rpx};
                    }
                    .clear-title {
                        color: #353535;
                        font-size: #{40rpx};
                        font-weight: 600;
                    }
                    .clear-content {
                        color: #353535;
                        font-size: #{26rpx};
                        margin: #{20rpx} 0 #{16rpx};
                        &.no-text {
                            margin: #{26rpx} 0;
                        }
                        text {
                            font-size: #{46rpx};
                            font-family: Alibaba;
                            font-weight: 600;
                            color: #ff4544;
                        }
                    }
                    .clear-goods-item {
                        margin: 0 auto;
                        background-color: #f7f7f7;
                        width: #{286rpx};
                        height: #{96rpx};
                        border-radius: #{16rpx};
                        .clear-goods-left {
                            width: #{96rpx};
                            height: #{96rpx};
                            .goods-img {
                                width: #{76rpx};
                                height: #{76rpx};
                                border-radius: #{8rpx};
                            }
                        }
                        .clear-goods-right {
                            width: #{190rpx};
                            height: #{96rpx};
                            color: #353535;
                            font-size: #{24rpx};
                            view {
                                text-align: left;
                            }
                        }
                    }
                }
                .clear-qr-item {
                    position: absolute;
                    bottom: #{34rpx};
                    z-index: 100;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: #{520rpx};
                    height: #{354rpx};
                    color: #fff;
                    font-size: #{24rpx};
                    .clear-qr {
                        width: #{200rpx};
                        height: #{200rpx};
                        margin-bottom: #{20rpx};
                        flex-shrink: 0;
                    }
                    .clear-tip {
                        margin-top: #{-15rpx};
                    }
                    .clear-btn {
                        margin-top: #{25rpx};
                        height: #{78rpx};
                        width: 100%;
                        .alone {
                            width: #{500rpx};
                        }
                        view {
                            text-align: center;
                            line-height: #{78rpx};
                            background-color: #fce5a1;
                            color: #cb0908;
                            margin: 0 #{20rpx};
                            width: #{240rpx};
                            height: #{78rpx};
                            border-radius: #{39rpx};
                        }
                    }
                }
            }
            .get-bg {
                width: 100%;
                height: 100%;
            }
            .close-btn {
                width: #{55rpx};
                height: #{55rpx};
                position: absolute;
                top: #{-55rpx};
                right: #{-55rpx};
                z-index: 31;
            }
        }
    }
</style>